<template>
	<view class="layout">
		
		<view class="box1" hover-class="boxhover">可乐鸡翅</view>
		</view>
		<scroll-view scroll-x="true" class="scrollx">
			<view class="box">哈哈哈哈</view>
			<view class="box">哈哈哈哈</view>
			<view class="box">哈哈哈哈</view>
			<view class="box">哈哈哈哈</view>
			<view class="box">哈哈哈哈</view>
			<view class="box">哈哈哈哈</view>
			<view class="box">哈哈哈哈</view>
			<view class="box">哈哈哈哈</view>
			<view class="box">哈哈哈哈</view>
			<view class="box">哈哈哈哈</view>
			<view class="box">哈哈哈哈</view>
			<view class="box">哈哈哈哈</view>
			<view class="box">哈哈哈哈</view>
			<view class="box">哈哈哈哈</view>
			
		</scroll-view>
	<view>
		<navigator url="/pages/demo1/demo1">跳转到demo1</navigator>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss">
	.layout{
		border: 1px solid red;
		
	}
	
	.boxhover{
		background: orange;
	}
	.scrollx{
		width: 80%;
		height: 200px;
		border: 1px solid chartreuse;
		white-space: nowrap;//禁止换行，在横向上显示
			
		.box{
			display: inline-block;
			margin: 10px;		
			
			}
	}
</style>
